<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket 整合 DeepSeek</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #messages {
            width: 100%;
            height: 200px;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            overflow-y: scroll;
        }
        #messageInput {
            width: calc(100% - 110px);
            padding: 10px;
        }
        #sendButton {
            padding: 10px 20px;
        }
    </style>
</head>
<body>
<h1>WebSocket 整合 DeepSeek</h1>
<div>
    <textarea id="messages" readonly></textarea>
</div>
<div>
    <input type="text" id="messageInput" placeholder="请输入消息">
    <button id="sendButton">发送</button>
</div>

<script>
    /*注意自身websocket地址信息*/
    const wsUri = "ws://localhost:8888/websocket";
    const websocket = new WebSocket(wsUri);

    websocket.onopen = function(event) {
        console.log("Connected to WebSocket server.");
        document.getElementById("messages").value += "已连接到WebSocket服务器。\n";
    };

    websocket.onmessage = function(event) {
        const messages = document.getElementById("messages");
        messages.value += "DeepSeek: " + event.data + "\n";
        messages.scrollTop = messages.scrollHeight;
    };

    websocket.onclose = function(event) {
        console.log("Disconnected from WebSocket server.");
        document.getElementById("messages").value += "已断开与WebSocket服务器的连接。\n";
    };

    websocket.onerror = function(error) {
        console.error("WebSocket error: ", error);
        document.getElementById("messages").value += "WebSocket错误: " + error.message + "\n";
    };

    document.getElementById("sendButton").addEventListener("click", function() {
        const messageInput = document.getElementById("messageInput");
        const message = messageInput.value;
        if (message) {
            if (websocket.readyState === WebSocket.OPEN) {
                websocket.send(message);
                messageInput.value = "";
                const messages = document.getElementById("messages");
                messages.value += "我: " + message + "\n";
                messages.scrollTop = messages.scrollHeight;
            } else {
                document.getElementById("messages").value += "WebSocket连接未打开，无法发送消息。\n";
            }
        }
    });
</script>
</body>
</html>
